<template>
  <div class="main-container">

    <!-- 统计卡片 -->
    <div class="stats-container">
      <div class="stat-card stat-total">
        <h3>总维保工单</h3>
        <div class="value">{{ stats.total }}</div>
      </div>
      <div class="stat-card stat-new">
        <h3>新请求</h3>
        <div class="value">{{ stats.newRequest }}</div>
      </div>
      <div class="stat-card stat-processing">
        <h3>进行中</h3>
        <div class="value">{{ stats.processing }}</div>
      </div>
      <div class="stat-card stat-pendingAccept">
        <h3>待验收</h3>
        <div class="value">{{ stats.pendingAccept }}</div>
      </div>
      <div class="stat-card stat-pendingJudg">
        <h3>待评价</h3>
        <div class="value">{{ stats.pendingJudg }}</div>
      </div>
      <div class="stat-card stat-done">
        <h3>已完成</h3>
        <div class="value">{{ stats.done }}</div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="card">
      <div class="filters">
        <!-- <div class="filter-item">
          <el-input v-model="filters.search" placeholder="搜索维保名称/设备..." clearable></el-input>
        </div> -->
        <div class="filter-item">
          <el-select v-model="filters.stage" placeholder="选择请求阶段" clearable>
            <el-option label="新请求" value="新请求"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="报废" value="报废"></el-option>
            <el-option label="待取消" value="待取消"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
            <el-option label="暂停" value="暂停"></el-option>
            <el-option label="待验收" value="待验收"></el-option>
            <el-option label="待评价" value="待评价"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="filters.deviceType" placeholder="选择设备类型" clearable>
            <el-option v-for="type in deviceTypes" :key="type" :label="type" :value="type"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <el-date-picker
            v-model="filters.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table
          :data="filteredWorkOrders"
          style="width: 100%; height: 100%;"
          :default-sort="{prop: 'requestTime', order: 'descending'}"
          @row-click="showDetailDialog">
          <el-table-column prop="name" label="维保名称" min-width="180" :header-cell-style="{ color: 'white' }"></el-table-column>
          <el-table-column prop="device" label="设备" min-width="120"></el-table-column>
          <el-table-column prop="workOrder" label="维保工单" min-width="130"></el-table-column>
          <el-table-column prop="requestTime" label="请求时间" sortable min-width="150"></el-table-column>
          <el-table-column prop="scheduleDate" label="安排日期" sortable min-width="150"></el-table-column>
          <el-table-column prop="applicant" label="申请人" min-width="120"></el-table-column>
          <el-table-column prop="teamLeader" label="维保团队负责人" min-width="150"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型" min-width="130"></el-table-column>
          <el-table-column prop="stage" label="请求阶段" min-width="120">
            <template #default="scope">
              <span :class="'stage-cell stage-' + getStageClass(scope.row.stage)">
                {{ scope.row.stage }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150" fixed="right">
            <template #default="scope">
              <div v-if="scope.row.stage === '待验收'">
                <button class="action-btn action-accept" @click.stop="showAcceptDialog(scope.row)">
                  验收
                </button>
              </div>
              <div v-if="scope.row.stage === '待评价'">
                <button class="action-btn action-accept" @click.stop="showEvaluateDialog(scope.row)">
                  评价
                </button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      :title="`维保工单详情 - ${currentDetail ? currentDetail.workOrder : ''}`"
      v-model="detailDialogVisible"
      width="80%"
      class="detail-dialog"
      :close-on-click-modal="false">
      <div v-if="currentDetail">
        <div class="detail-header">
          <h2>{{ currentDetail.name }}</h2>
          <p>{{ currentDetail.device }} | {{ currentDetail.deviceType }} | 工单号: {{ currentDetail.workOrder }}</p>
        </div>
        <div class="detail-body">
          <div>
            <div class="detail-item">
              <h3>维保名称</h3>
              <p>{{ currentDetail.name }}</p>
            </div>
            <div class="detail-item">
              <h3>设备名称</h3>
              <p>{{ currentDetail.device }}</p>
            </div>
            <div class="detail-item">
              <h3>设备类型</h3>
              <p>{{ currentDetail.deviceType }}</p>
            </div>
            <div class="detail-item">
              <h3>维保工单号</h3>
              <p>{{ currentDetail.workOrder }}</p>
            </div>
          </div>
          <div>
            <div class="detail-item">
              <h3>请求时间</h3>
              <p>{{ currentDetail.requestTime }}</p>
            </div>
            <div class="detail-item">
              <h3>安排日期</h3>
              <p>{{ currentDetail.scheduleDate }}</p>
            </div>
            <div class="detail-item">
              <h3>申请人</h3>
              <p>{{ currentDetail.applicant }}</p>
            </div>
            <div class="detail-item">
              <h3>维保团队负责人</h3>
              <p>{{ currentDetail.teamLeader }}</p>
            </div>
          </div>
          <div>
            <div class="detail-item">
              <h3>当前阶段</h3>
              <p><span :class="'stage-cell stage-' + getStageClass(currentDetail.stage)">{{ currentDetail.stage }}</span></p>
            </div>
            <div class="detail-item">
              <h3>问题描述</h3>
              <p>{{ currentDetail.description || '设备出现异常，需要维护检查' }}</p>
            </div>
            <div v-if="currentDetail.acceptanceResult" class="detail-item">
              <h3>验收结果</h3>
              <p><span :class="'status-tag ' + (currentDetail.acceptanceResult === '合格' ? 'status-pass' : 'status-fail')">
                {{ currentDetail.acceptanceResult }}
              </span></p>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 验收对话框 -->
    <el-dialog
      title="维保验收"
      v-model="acceptDialogVisible"
      width="500px"
      :close-on-click-modal="false">
      <div v-if="currentActionRow">
        <p>请确认对工单 <strong>{{ currentActionRow.workOrder }}</strong> 的验收结果：</p>
        <el-radio-group v-model="acceptResult" style="margin: 20px 0;">
          <el-radio label="合格">合格</el-radio>
          <el-radio label="不合格">不合格</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="验收备注（可选）"
          v-model="acceptComment">
        </el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="acceptDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAcceptance">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 评价对话框 -->
    <el-dialog
      title="维保评价"
      v-model="evaluateDialogVisible"
      width="500px"
      :close-on-click-modal="false">
      <div v-if="currentActionRow">
        <p>请对工单 <strong>{{ currentActionRow.workOrder }}</strong> 的服务进行评价：</p>
        <el-radio-group v-model="evaluateRating" style="margin: 20px 0;">
          <el-radio label="满意">满意</el-radio>
          <el-radio label="不满意">不满意</el-radio>
        </el-radio-group>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入评价说明"
          v-model="evaluateComment">
        </el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="evaluateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEvaluation" >提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      // 筛选条件
      filters: {
        search: '',
        stage: '',
        deviceType: '',
        dateRange: []
      },
      
      // 设备类型列表
      deviceTypes: ['倒角机XXZP-C300', '震动倒角机自动上下料'],
      
      // 工单数据
      workOrders: [],
      workOrders_bf: [],
      
      // 当前操作的工单
      currentDetail: null,
      currentActionRow: null,
      
      // 对话框控制
      detailDialogVisible: false,
      acceptDialogVisible: false,
      evaluateDialogVisible: false,
      
      // 验收数据
      acceptResult: '合格',
      acceptComment: '',
      
      // 评价数据
      evaluateRating: '满意',
      evaluateComment: ''
    };
  },
  
  mounted() {
    // 页面加载时从后端获取数据
    this.fetchWorkOrders();
  },
  
  computed: {
    // 统计信息
    stats() {
      return {
        total: this.workOrders.length,
        newRequest: this.workOrders.filter(w => w.stage === '新请求').length,
        processing: this.workOrders.filter(w => w.stage === '进行中').length,
        pendingAccept: this.workOrders.filter(w => w.stage === '待验收').length,
        pendingJudg: this.workOrders.filter(w => w.stage === '待评价').length, //done,
        done: this.workOrders.filter(w => w.stage === '已完成').length //done
      };
    },
    
    // 筛选后的工单
    filteredWorkOrders() {
      let result = [...this.workOrders];
      
      // 搜索筛选
      if (this.filters.search) {
        const search = this.filters.search.toLowerCase();
        result = result.filter(w => 
          w.name.toLowerCase().includes(search) || 
          w.device.toLowerCase().includes(search) ||
          w.workOrder.toLowerCase().includes(search)
        );
      }
      
      // 阶段筛选
      if (this.filters.stage) {
        result = result.filter(w => w.stage === this.filters.stage);
      }
      
      // 设备类型筛选
      if (this.filters.deviceType) {
        result = result.filter(w => w.deviceType === this.filters.deviceType);
      }
      
      // 日期范围筛选
      if (this.filters.dateRange && this.filters.dateRange.length === 2) {
        const start = new Date(this.filters.dateRange[0]);
        const end = new Date(this.filters.dateRange[1]);
        
        result = result.filter(w => {
          const date = new Date(w.requestTime);
          return date >= start && date <= end;
        });
      }
      
      return result;
    }
  },
  
  methods: {
    // 从后端获取工单数据
    async fetchWorkOrders() {
      this.deviceTypes = []
      const Re_stage = {
        1:"新请求",
        2:"进行中",
        3:"已完成",
        4:"报废",
        14:"待取消",
        15:"已取消",
        16:"暂停",
        7:"待验收",
        17:"待评价",
        13:"已合并"
      }
      try {
        // 实际项目中替换为真实的API地址
        const response = await axios.get('api/wsz_shebei/weibao_devices');
        console.log("))))))",response.data)
        // 假设后端返回的数据结构为 { data: [...] }
        if (response.data && Array.isArray(response.data)) {
          console.log("这里了吗？")
          this.workOrders_bf = response.data;
          this.workOrders = []; // 清空原有数据
          console.log("this.workOrders_bf",this.workOrders_bf)
          for(let i=0;i<this.workOrders_bf.length;i++){
            console.log("this.workOrders_bf[i]",this.workOrders_bf[i])
            for(let j=0;j<this.workOrders_bf[i].length;j++){
              var per = this.workOrders_bf[i]
              console.log("per",per)
              // 确保stage_id的display_name是数字键，转换为对应状态文本
              const stageKey = per[j].stage_id?.[0];
              console.log("LLLLL",stageKey)
              if(per[j].stage_id?.[1] != "Repaired"){
                var type_dev = per[j].category_id?.[1] || ''
                if(!this.deviceTypes.includes(type_dev)){
                  this.deviceTypes.push(type_dev)
                }              
                this.workOrders.push({
                  id: per[j], // 补充id字段，用于后续更新
                  name: per[j].name || '',
                  device: per[j].equipment_id?.[1] || '',
                  workOrder: per[j].work_order_id?.[1] || '',
                  requestTime: per[j].request_date || '',
                  scheduleDate: per[j].schedule_date || '',
                  applicant: per[j].employee_id?.[1] || '',
                  teamLeader: per[j].user_id?.[1] || '',
                  deviceType: per[j].category_id?.[1] || '',
                  stage: Re_stage[stageKey] || '未知状态',
                  // description: per[j].description || ''
                })
              }
            }
            
          }
        } else {
          ElMessage.error('获取工单数据失败：数据格式不正确');
          // 加载失败时使用模拟数据作为 fallback
          this.loadMockData();
        }
      } catch (error) {
        console.error('获取工单数据失败：', error);
        ElMessage.error('获取工单数据失败，请稍后重试');
        // 加载失败时使用模拟数据作为 fallback
        this.loadMockData();
      }
    },
    
    // 加载模拟数据（作为请求失败的备用方案）
    loadMockData() {
      const mockData = [
        {
          id: 1,
          name: '设备季度维护',
          device: '数控机床A-01',
          workOrder: 'WO202307001',
          requestTime: '2023-07-01',
          scheduleDate: '2023-07-05',
          applicant: '张三',
          teamLeader: '李工',
          deviceType: '生产设备',
          stage: '新请求',
          description: '设备季度常规维护保养'
        },
        {
          id: 2,
          name: '设备故障维修',
          device: '检测仪B-02',
          workOrder: 'WO202307002',
          requestTime: '2023-07-03',
          scheduleDate: '2023-07-04',
          applicant: '王五',
          teamLeader: '赵工',
          deviceType: '检测设备',
          stage: '待验收',
          description: '设备检测结果异常，需要维修'
        },
        {
          id: 3,
          name: '空调系统维护',
          device: '中央空调C-01',
          workOrder: 'WO202307003',
          requestTime: '2023-07-05',
          scheduleDate: '2023-07-07',
          applicant: '钱七',
          teamLeader: '孙工',
          deviceType: '空调设备',
          stage: '进行中',
          description: '空调制冷效果下降，需要维护'
        },
        {
          id: 4,
          name: '网络设备升级',
          device: '核心交换机',
          workOrder: 'WO202307004',
          requestTime: '2023-07-06',
          scheduleDate: '2023-07-08',
          applicant: '郑九',
          teamLeader: '周工',
          deviceType: '网络设备',
          stage: '已完成',
          description: '核心交换机固件升级'
        },
        {
          id: 5,
          name: '电梯年检维护',
          device: '客梯1号',
          workOrder: 'WO202307005',
          requestTime: '2023-07-07',
          scheduleDate: '2023-07-10',
          applicant: '吴十一',
          teamLeader: '李工',
          deviceType: '电梯设备',
          stage: '待验收',
          description: '电梯年度安全检测与维护'
        },
        {
          id: 6,
          name: '办公设备维修',
          device: '打印机F-03',
          workOrder: 'WO202307006',
          requestTime: '2023-07-08',
          scheduleDate: '2023-07-09',
          applicant: '刘十三',
          teamLeader: '赵工',
          deviceType: '办公设备',
          stage: '报废',
          description: '打印机卡纸频繁，需要维修'
        },
        {
          id: 7,
          name: '生产设备校准',
          device: '装配线D-02',
          workOrder: 'WO202307007',
          requestTime: '2023-07-10',
          scheduleDate: '2023-07-12',
          applicant: '陈十五',
          teamLeader: '孙工',
          deviceType: '生产设备',
          stage: '暂停',
          description: '装配线精度校准'
        },
        {
          id: 8,
          name: '服务器维护',
          device: '服务器集群',
          workOrder: 'WO202307008',
          requestTime: '2023-07-11',
          scheduleDate: '2023-07-15',
          applicant: '林十七',
          teamLeader: '周工',
          deviceType: '网络设备',
          stage: '待取消',
          description: '服务器硬件维护与系统更新'
        }
      ];
      this.workOrders = mockData;
    },
    
    // 获取阶段对应的CSS类
    getStageClass(stage) {
      const map = {
        '新请求': 'new',
        '进行中': 'processing',
        '已完成': 'repaired',
        '报废': 'scrapped',
        '待取消': 'pending-cancel',
        '已取消': 'cancelled',
        '暂停': 'paused',
        '待验收': 'pending-accept',
        '待评价': 'pending-judge'
      };
      return map[stage] || 'default';
    },
    
    // 显示详情对话框
    showDetailDialog(row) {
      this.currentDetail = {...row};
      this.detailDialogVisible = true;
    },
    
    // 显示验收对话框
    showAcceptDialog(row) {
      this.currentActionRow = row;
      this.acceptResult = '合格';
      this.acceptComment = '';
      this.acceptDialogVisible = true;
    },
    
    // 提交验收结果
    submitAcceptance() {
      if (this.currentActionRow) {
        const index = this.workOrders.findIndex(w => w.id === this.currentActionRow.id);
        if (index !== -1) {
          // 更新验收结果
          this.workOrders[index].acceptanceResult = this.acceptResult;
          
          // 如果有备注，添加到描述中
          if (this.acceptComment) {
            this.workOrders[index].description += `${this.acceptComment}`;
          }
          
          // 验收后状态变为"已完成"
          this.workOrders[index].stage = '待评价';
          // this.workOrders[index].push({
          //   option_type:"验收"
          // })
          
          // 调用API更新后端数据
          this.updateWorkOrder(this.workOrders[index],"验收");
          
          ElMessage.success(`验收结果提交成功: ${this.acceptResult}`);
        }
      }
      this.acceptDialogVisible = false;
    },
    
    // 显示评价对话框（根据新状态暂不使用，保留代码结构）
    showEvaluateDialog(row) {
      this.currentActionRow = row;
      this.evaluateRating = '满意';
      this.evaluateComment = '';
      this.evaluateDialogVisible = true;
    },
    
    // 提交评价结果（根据新状态暂不使用，保留代码结构）
    submitEvaluation() {
      // if (!this.evaluateComment) {
      //   ElMessage.warning('请填写评价说明');
      //   return;
      // }
      
      if (this.currentActionRow) {
        const index = this.workOrders.findIndex(w => w.id === this.currentActionRow.id);
        if (index !== -1) {
          // 添加评价
          this.workOrders[index].evaluation = {
            rating: this.evaluateRating,
            comment: this.evaluateComment
          };
          
          // 调用API更新后端数据
          this.updateWorkOrder(this.workOrders[index],"评价");
          this.workOrders[index].stage = '已完成';
          ElMessage.success(`评价提交成功: ${this.evaluateRating}`);
        }
      }
      this.evaluateDialogVisible = false;
    },
    
    // 更新工单到后端
    async updateWorkOrder(workOrder,option) {
      try {
        // 实际项目中替换为真实的API地址
        console.log(workOrder,option)
        workOrder.option_type = option
        console.log(workOrder)
        let mes_data_final = []
        mes_data_final.push(workOrder)
        let jsonString_mes_data = JSON.stringify(mes_data_final)
        const loadingInstance = this.$loading({
                    lock: true,
                    text: '提交'+option+'申请中...', 
                    spinner: 'el-icon-loading',
                    background: 'rgba(247, 237, 237, 0.7)'
                });                
                this.http.get('api/wsz_shebei/wb_done_final',
                    {mes_data:jsonString_mes_data})
                    .then((reslut) => {
                    loadingInstance.close(); 
                    if(reslut == "成功"){
                        // this.$message.success('维保申请已提交，将尽快处理');
                        this.maintenanceDialogVisible = false;
                        // this.$refs.maintenanceForm.resetFields(); 
                        ElMessage.success('工单已成功更新');
                    }
                    })
                    .catch((error) => {
                    console.log("失败", error);
                    loadingInstance.close();                            
                    });
 
        // await axios.put(`/api/work-orders/${workOrder.id}`, workOrder);
        
      } catch (error) {
        console.error('更新工单失败：', error);
        ElMessage.error('更新工单失败，请稍后重试');
      }
    }
  }
};
</script>

<style>
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  padding: 20px;
}
.main-container {
  max-width: auto;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 10px;
  margin: 0 auto;
}
.header {
  text-align: center;
  padding: 30px 0;
  color: #2c3e50;
}
.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.header p {
  font-size: 1.2rem;
  color: #7f8c8d;
  max-width: 800px;
  margin: 0 auto;
}
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 25px;
  margin-bottom: 30px;
}
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.stat-card {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-5px);
}
.stat-card h3 {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.stat-card .value {
  font-size: 2.2rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* 不同统计卡片的颜色 */
.stat-total {
  background: linear-gradient(135deg, #3498db, #2980b9);
}
.stat-new {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
}
.stat-processing {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}
.stat-pendingAccept {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.stat-pendingJudg {
  background: linear-gradient(135deg, #4cfe00, #4cfe00);
}  

.stat-done {
  background: linear-gradient(135deg, #057032, #057032);
}  

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}
.filter-item {
  flex: 1;
  min-width: 200px;
}
.table-container {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  position: relative;
  height: 500px;
}
.el-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.el-table th {
  background-color: #15da3c !important;
  color: white !important;
  font-weight: bold;
  font-size: 16px; /* 增大表头字体大小 */
  padding: 12px 0;
  white-space: nowrap;
  text-align: center !important; /* 表头文字居中 */
}
.el-table td {
  text-align: center !important; /* 表格内容文字居中 */
  padding: 10px 0;
}
.el-table tr:hover td {
  background-color: #e6f7ff !important;
  cursor: pointer;
}
.stage-cell {
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
  font-weight: bold;
  font-size: 0.85rem;
}
/* 阶段样式 */
.stage-new {
  background-color: #bbdefb;
  color: #1976d2;
}
.stage-processing {
  background-color: #ffecb3;
  color: #ff9800;
}
.stage-repaired {
  background-color: #c8e6c9;
  color: #388e3c;
}
.stage-scrapped {
  background-color: #ffcdd2;
  color: #d32f2f;
}
.stage-pending-cancel {
  background-color: #f8bbd0;
  color: #c2185b;
}
.stage-cancelled {
  background-color: #e0e0e0;
  color: #757575;
}
.stage-paused {
  background-color: #d1c4e9;
  color: #673ab7;
}
.stage-pending-accept {
  background-color: #b2ebf2;
  color: #00897b;
}
.stage-pending-judge {
  background-color: #54ef40;
  color: #2c6b65;
}

.action-btn {
  padding: 7px 15px;
  border-radius: 5px;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}
.action-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.action-accept {
  background: linear-gradient(45deg, #4CAF50, #2E7D32);
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
}
.action-evaluate {
  background: linear-gradient(45deg, #2196F3, #0D47A1);
  box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3);
}
.detail-dialog {
  border-radius: 12px;
  overflow: hidden;
}
.detail-header {
  background: linear-gradient(135deg, #3498db, #1a5f9e);
  color: white;
  padding: 20px;
}
.detail-body {
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.detail-item {
  margin-bottom: 15px;
}
.detail-item h3 {
  color: #7f8c8d;
  font-size: 0.95rem;
  margin-bottom: 5px;
}
.detail-item p {
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 500;
}
.dialog-footer {
  text-align: center;
  padding: 20px;
}
.status-tag {
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
}
.status-pass {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.status-fail {
  background-color: #ffebee;
  color: #c62828;
}
.footer {
  text-align: center;
  padding: 25px 0;
  color: #7f8c8d;
  font-size: 0.95rem;
}
@media (max-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }
  .filters {
    flex-direction: column;
  }
  .detail-body {
    grid-template-columns: 1fr;
  }
  .el-table th {
    font-size: 14px; /* 小屏幕上减小表头字体大小 */
  }
  .table-container {
    height: 400px;
  }
  .el-table {
    table-layout: auto;
  }
}
</style>